<template>
  <van-cell class="self-cell" center size="large">
    <template #title>
      <van-row @click="onSelfCellClick" class="self-top">
        <van-col span="6">
          <van-image
            class="head-img"
            :show-loading="loading"
            radius="4"
            :src="headUrl"/>
        </van-col>
        <van-col span="18">
          <van-row class="self-title">{{title}}</van-row>
          <van-row class="self-id">
            <van-col span="22">微信号：{{chatId}}</van-col>
            <van-col span="2" class="self-icon">
              <van-icon name="qr" />
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row>
        <van-tag :color="tagColor" plain round size="large" @click="onClickTag">状态<van-icon color="red" name="like" /></van-tag>
      </van-row>
    </template>
    <template #right-icon>
      <van-icon name="arrow" color="#969799" style="font-size: .42667rem" />
    </template>
  </van-cell>
</template>

<script>
  import { Toast } from "vant";
  import _CONST from '@/static/utils/const.util'
  import moment from 'moment'
  export default {
    name: "SelfCard",
    props: {
      headUrl: {
        type: String,
        default: ""
      },
      title: {
        type: String,
        default: ""
      },
      chatId: {
        type: String,
        default: ""
      }
    },
    data () {
      return {
        toNowDays: 0,
        loading: false,
        tagColor: '#35a6dd'
      }
    },
    activated:function(){
      this.initDateComponent();
      this.randomColor()
    },
    mounted() {
      this.initDateComponent();
      this.randomColor()
    },
    methods: {
      onSelfCellClick() {
        this.$router.push({name:'selfInfo'});
      },
      onClickTag() {
        this.randomColor();
      },
      randomColor() {
        let color = "#";
        for(let i=0;i<6;i++){
          color += Math.floor(Math.random()*16).toString(16);
        }
        this.tagColor = color;
      },
      initDateComponent() {
        this.toNowDays = moment(new Date()).diff(moment(_CONST.THE_DAY_FALL_IN_LOVE), 'day') + 1
      },
    }
  }
</script>

<style scoped>
  .self-cell {
    height: 30%;
    min-height: 3rem;
  }
  .self-top {
    height: 60px;
  }
  .head-img {
    width: 60px;
    height: 60px;
  }
  .self-title {
    font-size: 20px;
    font-weight: bold;
    height: 30px;
    font-family: -apple-system;
  }
  .self-id {
    height: 30px;
    color: #B6B6B6;
    font-size: 14px;
  }
  .self-icon {
    line-height: 30px;
    display: inline-block;
  }
</style>